<template>
    <div>
        <el-drawer
                :before-close="handleClose"
                :append-to-body="true"
                :visible.sync="dialogVip"
                :direction="direction">
            <h5 class="title">修改订单信息</h5>
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm demo-form-inline" :inline="true" size="medium">
                <el-form-item label="出发地点" prop="origin">
                    <el-select v-model="ruleForm.origin" filterable placeholder="请手动选择地点" style="width: 180px;">
                        <el-option  v-for="item in origins"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="目的地" prop="destination">
                    <el-select v-model="ruleForm.destination" placeholder="请手动选择地点" style="width: 180px;">
                        <el-option  v-for="item in destinations"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="出发时间" required>
                    <el-col :span="11">
                        <el-form-item prop="date1">
                            <el-date-picker type="date" size="mini"  placeholder="选择日期" v-model="ruleForm.date1" style="width: 130px;"></el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col class="line" :span="2">-</el-col>
                    <el-col :span="11">
                        <el-form-item prop="date2">
                            <el-time-picker size="mini" placeholder="选择时间" v-model="ruleForm.date2" style="width: 110px;"></el-time-picker>
                        </el-form-item>
                    </el-col>
                </el-form-item>
                <el-form-item label="售票员" prop="clId">
                    <el-select v-model="ruleForm.clId" filterable placeholder="售票员" style="width: 100px;">
                        <el-option  v-for="item in emps"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="票价" prop="cost">
                    <el-input type="number" v-model.number="ruleForm.cost" style="width:80px;"></el-input>
                </el-form-item>
                <el-form-item label="乘客姓名" prop="name">
                    <el-input v-model="ruleForm.name" style="width:180px"></el-input>
                </el-form-item>
                <el-form-item label="电话" prop="phone">
                    <el-input type="phone" maxlength="11"  v-model.number="ruleForm.phone" autocomplete="off" style="width:180px;"></el-input>
                </el-form-item>
                <el-form-item label="身份证号" prop="idCard">
                    <el-input v-model="ruleForm.idCard" style="width:auto;" maxlength="18"></el-input>
                </el-form-item>
                <el-form-item label="缴费状态" prop="costStatus">
                    <el-select v-model="ruleForm.costStatus" placeholder="请选择" style="width: 110px;margin-right: 70px">
                        <el-option label="未支付" value="0"></el-option>
                        <el-option label="已支付" value="1"></el-option>
                        <el-option label="派车中" value="2"></el-option>
                        <el-option label="进行中" value="3"></el-option>
                        <el-option label="订单完成" value="4"></el-option>
                        <el-option label="乘客取消" value="-1"></el-option>
                        <el-option label="管理员取消" value="-2"></el-option>
                        <el-option label="系统取消" value="-3"></el-option>
                        <el-option label="交易失败" value="-4"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="Submit" :loading="loading">{{ loading ? '提交中 ...' : '提交修改' }}</el-button>
                    <el-button @click="cancelForm">取 消</el-button>
                </el-form-item>
            </el-form>
        </el-drawer>
    </div>

</template>

<script>
    export default {
        name: "EditOrder",
        inject:['reload'],
        props:{
          dataOrder:{}
        },
        data() {
            return {
                direction: 'btt',
                loading:false,
                origins: null,    //下拉列表框
                destinations: null,
                emps: null,
                ruleForm: {
                    origin: '',
                    destination: '',
                    date1: '',
                    date2: '',
                    name: '',
                    phone: '',
                    idCard: '',
                    clId: '',
                    cost: '',
                    costStatus: '',
                    delivery: false,
                },
                rules: {
                    origin: [
                        { required: true, message: '请选择出发地点', trigger: 'change' }
                    ],
                    destination: [
                        { required: true, message: '请选择目的地', trigger: 'change' }
                    ],
                    date1: [
                        { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
                    ],
                    date2: [
                        { type: 'date', required: true, message: '请选择时间', trigger: 'change' }
                    ],
                    name: [
                        { required: true, message: '请输入乘客姓名', trigger: 'blur' },
                        { min: 2, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur' }
                    ],
                    phone: [
                        { required: true, message: '请输入电话',trigger: 'blur'},
                        { type: 'number', message: '电话必须为数字值', trigger: 'blur'},
                    ],
                    idCard: [
                        { required: true, message: '请输入身份证号码',trigger: 'blur'},
                    ],
                    clId: [
                        { required: true, message: '请选择售票员',trigger: 'blur'},
                    ],
                    cost: [
                        { required: true, message: '请输入票价',trigger: 'blur'},
                        { type: 'number', message: '电话必须为数字值', trigger: 'blur'},
                    ],
                    costStatus: [
                        { required: true, message: '请选择缴费状态', trigger: 'change' }
                    ],
                },
                timer: null,
            }
        },
        mounted(){
            this.getData();
        },
        methods:{
            async getData(){
                await this.axios.get("/option/getAllOption").then(res=>{
                    //console.log(res.data.emps);
                    this.origins=res.data.origins;
                    this.destinations=res.data.destinations;
                    this.emps=res.data.emps;
                });
            },
            handleClose(done) {
                done();
                //点击抽屉以外，直接回到列表页面
                this.loading = false;
                this.$store.commit('setDialog',false);
                clearTimeout(this.timer);
            },
            cancelForm() {
                //点击取消按钮
                this.loading = false;
                this.$store.commit('setDialog',false);
                clearTimeout(this.timer);
            },
            Submit() {
                //点击提交按钮
                if (this.loading) {
                    return;
                }
                //验证表单
                this.$refs['ruleForm'].validate((valid) => {
                    if (valid) {
                        console.log('表单验证通过！');
                        this.$confirm('确定要提交修改吗？')
                            .then(_ => {
                                //提交表单
                                this.loading = true;
                                this.timer = setTimeout(() => {
                                    //封装出发/结束时间
                                    let date1=this.ruleForm.date1;
                                    let date2=this.ruleForm.date2;
                                    let beginTime=new Date(date1.getFullYear(),date1.getMonth(),date1.getDate(),date2.getHours(),date2.getMinutes(),date2.getSeconds());
                                    let endTime=new Date(date1.getFullYear(),date1.getMonth(),date1.getDate(),date2.getHours()+5,date2.getMinutes(),date2.getSeconds());
                                    //封装录入乘客信息
                                    let client = new URLSearchParams();
                                    client.append('clname', this.ruleForm.name);
                                    client.append('clphone', this.ruleForm.phone);
                                    client.append('clidcard',this.ruleForm.idCard);
                                    client.append('registertime',new Date());
                                    this.axios.post("/client/add",client).then(res=>{
                                        //获取乘客id
                                        let clientid=res.data;

                                        //获取车辆id

                                        //封装订单类
                                        let order = new URLSearchParams();
                                        order.append('orid', this.dataOrder.orid);
                                        order.append('origin', this.ruleForm.origin);
                                        order.append('destination', this.ruleForm.destination);
                                        order.append('beginTime',beginTime);
                                        order.append('endTime',endTime);
                                        order.append('node',"没有留下备注");
                                        order.append('clientid', clientid);
                                        order.append('busid', 1);
                                        order.append('sellerid', this.ruleForm.clId);
                                        order.append('cost', this.ruleForm.cost);
                                        order.append('createTime', new Date(this.dataOrder.createTime));
                                        order.append('costStatus', this.ruleForm.costStatus);
                                        // 动画关闭需要一定的时间
                                        setTimeout(() => {
                                            this.axios.post("/order/update",order)
                                                .then(res=>{
                                                    if (res.data==""){
                                                        this.$notify({
                                                            message: "权限不足,请联系高级管理员",
                                                            type: 'error'
                                                        });
                                                    }else{
                                                        this.$notify({
                                                            message: res.data,
                                                            type: 'success'
                                                        });
                                                    }
                                                    /*this.$notify({
                                                        message: res.data,
                                                        type: 'success'
                                                    });*/
                                                    //关闭面板
                                                    this.$store.commit('setDialog',false);
                                                    //重新渲染（CSDN上的快速刷新页面）
                                                    this.reload();
                                                });
                                            this.loading = false;
                                        }, 400);
                                    });
                                }, 500)
                            })
                            .catch(_ => {
                                //不提交表单，回到列表页面
                                this.loading = false;
                                this.$store.commit('setDialog',false);
                                clearTimeout(this.timer);
                            });
                    } else {
                        //表单验证失败
                        this.$message.error('请正确填写订单的修改信息');
                        return false;
                    }
                });

            },
        },
        computed:{
            dialogVip: {
                get() {
                    return this.$store.getters.dialogVip;
                },
                set() {
                    //解决警告
                }
            }
        },
    }
</script>

<style scoped>
    .title{
        text-align: center;margin-top: -45px;margin-bottom: 35px;
    }

</style>
